<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/admin/_layouts/default">
<head>
    <title>栏目排序</title>
</head>
<body>
<div layout:fragment="content">
    <!-- 内容区域 -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-xs-12 i-navbar">
                <a class="btn btn-primary" th:href="@{/admin/content/channel/index.html}" data-pjax><i
                        class="fa fa-arrow-left"></i> 返回
                </a>
            </div>
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <header class="tool-bar">
                            <h3 class="pull-left">栏目排序</h3>
                            <div class="pull-right tool-button">
                                <button class="btn btn-primary"
                                        onclick="allRequest.complete()">
                                    <i class="fa fa-floppy-o"></i> 保存
                                </button>
                            </div>
                        </header>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">

                        <div class="dd" id="nestable">
                            <ol class="dd-list">
                                <!--/*@thymesVar id="nodes" type="java.util.List<in.hocg.web.lang.utils.tree.Node<in.hocg.web.modules.system.domain.Channel>>"*/-->
                                <li class="dd-item"
                                    th:each="node, i: ${nodes}"
                                    th:attr="data-id=${node.node.id}">
                                    <div class="dd-handle" th:text="${node.node.name}">Item 1</div>
                                    <ol th:if="${node.children != null}"
                                        th:replace="/admin/_widgets/tree-nodes::tree-nodes(${node.children})"></ol>
                                </li>
                            </ol>
                        </div>

                    </div>
                    <!-- /.box-body -->
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
    <!-- /内容区域 -->
    <script>
        var allRequest = {};
        $(function () {
            // 所有网络请求
            allRequest = {
                complete: function () {
                    var ids = getId($("#nestable").nestable('serialize'));
                    if (!!ids) {
                        layer.confirm('确定保存排序?', {
                            btn: ['确定', '取消'] //按钮
                        }, function () {
                            $.post('/admin/content/channel/update-sort', {id: ids.toString()}, function (data) {
                                if (data.code === 200) {
                                    layer.msg(data.message, {icon: 1});
                                } else {
                                    layer.msg(data.message, {icon: 2});
                                }
                            }, 'json');
                        }, function () {
                            layer.msg('取消保存');
                        });
                    } else {
                        layer.msg('菜单列表不存在');
                    }
                }
            };

            function getId(ob) {
                var ids = [];
                $.each(ob, function (i, o) {
                    ids.push(o.id);
                    if (o.children) {
                        ids = ids.concat(getId(o.children))
                    }
                });
                return ids;
            }

            $('#nestable').nestable();
        })
    </script>
</div>
</body>
</html>
